
<template>
  <div class="grade-page">
    <!-- 顶部选择班级 -->
    <div class="grade-body">
      <ul class="grade-list">
        <li class="garde-li" v-for="(item,index) in gradeList" :key="index">
          <div
            :class="choseClass !== index ? 'grade-box' :'grade-choosed-box'"
            @click="choseRoleFun(item,index)"
          >{{item.sstClassName}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { axGet } from '@/api/index'

export default {
  name: "grade",
  data() {
    return {
      listWidth: 0
    };
  },
  props: {
    gradeList: {
      type: Array,
      default: []
    },
    choseRole: {
      type: Function,
      default: null
    },
    choseClass: {
      type: Number,
      default: null
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 选角
    choseRoleFun(item, index) {
      this.$emit("selectClass", item, index);
    },
    //获取班级
    getClassName(item) {}
  }
};
</script>
<style lang="scss" scoped>
.grade-page {
  .grade-body {
    width: 100%;
    // height: auto;
    padding: 0.2rem 0;
    overflow: hidden;
    overflow-x: scroll;
  }
  .grade-body::-webkit-scrollbar {
    display: none;
  }
  .grade-list {
    white-space: nowrap;
    .garde-li {
      width: auto;
      height: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      margin-left: 0.4rem;
      display: inline-block;
      .grade-box {
        font-size: 0.3rem;
        background-color: #eff1f3;
        color: #999999;
        border-radius: 0.35rem;
        padding: 0 0.35rem;
      }
      .grade-choosed-box {
        font-size: 0.3rem;
        background-color: #05b3b6;
        color: #ffffff;
        border-radius: 0.35rem;
        padding: 0 0.35rem;
      }
    }
  }
}
</style>